Vue.component("j-central-point-setting", {
  template: `<div >
        <Submenu  name="5" style="border-bottom: inset 1px; " class="rightFontSize">
            <template slot="title">
                <span>中心点设置</span>
            </template>
            <div class="blockDiv" style="padding-bottom: 10px">
                <Row class="ivurow">
                    <p>x轴&nbsp;&nbsp;</p>
                    <i-input size="small" type="number" v-model="centralPoint.center[0]" @on-change="onMarginChange" style="margin-left: 5px;width: 164px" :value="centralPoint.center[0]"></i-input>
                </Row>
                <Row class="ivurow">
                    <p style="margin-bottom: 10px;">y轴&nbsp;&nbsp;</p>
                    <i-input size="small" type="number" v-model="centralPoint.center[1]" @on-change="onMarginChange" style="margin-left: 5px;width: 164px" :value="centralPoint.center[1]"></i-input>
                </Row>
            </div>
        </Submenu>
    </div>`,
  props: {
    settings: {
      type: Object,
      required: true,
      default: () => {},
    },
  },
  data() {
    return {
      centralPoint: {},
    };
  },
  watch: {
    settings: {
      deep: true,
      immediate: true,
      handler: function () {
        console.log("我进来了");
        this.initData();
      },
    },
  },
  methods: {
    initData: function () {
      console.log(this.centralPoint, "我进来了");
      if (this.settings) {
        this.centralPoint = Object.assign(this.centralPoint, this.settings);
      }
    },
    onMarginChange() {
      this.$emit("change", this.centralPoint);
    },
  },
});
